<template>
    <el-form ref="formRef" :model="formParams" :rules="rules" label-width="auto">
        <share-link-settings ref="shareLinkSettingsRef" v-model="formParams" class="share-link-setting-form" />
        <!-- <aside class="form-title">活动链接设置</aside>
        <el-form-item label="封面" prop="link_img">
            <single-upload v-model="formParams.link_img" label="更换封面" accept=".jpg,.png" size="200">
                <template #tip> 支持JPG、PNG格式，大小200KB以内，建议长宽比为1:1 </template>
            </single-upload>
        </el-form-item>
        <el-form-item label="标题" prop="link_title">
            <el-input v-model="formParams.link_title" maxlength="20" show-word-limit placeholder="请输入标题" />
        </el-form-item>
        <el-form-item label="描述" prop="link_desc">
            <el-input v-model="formParams.link_desc" maxlength="30" show-word-limit placeholder="请输入描述" />
        </el-form-item> -->
        <aside class="form-title form-title-top">欢迎语设置</aside>
        <el-form-item label="添加员工后推送" prop="staff_welcome">
            <ZwMaterialContent
                id="staffMaterialContent"
                ref="staffMaterialContentRef"
                re-key="staffWelcome"
                :input-content-tabs="inputContentTabs"
                :show-material-tabs="showMaterialTabs"
                :operation-list="operationList"
                :input-content-data="formParams.staff_welcome.welcome_text"
                :material-content-data="defaultMaterialContentData"
                :placeholder="'请输入欢迎语'"
                @change="changeMaterial" />
        </el-form-item>
        <el-form-item label="加入群聊后推送" prop="groupchat_welcome">
            <div class="table-tip welcome-tip">
                1）入群欢迎语需要在企微群手动设置，若未设置欢迎语，客户入群之后将不会推送；2）删除活动后，入群欢迎语也会删除；3）编辑会同步编辑。
            </div>
            <ZwMaterialContent
                id="groupMaterialContent"
                ref="groupMaterialContentRef"
                re-key="groupchatWelcome"
                :input-content-tabs="groupInputContentTabs"
                :show-material-tabs="[]"
                :operation-list="groupOperationList"
                :input-content-data="formParams.groupchat_welcome.welcome_text"
                :material-content-data="defaultGroupMaterialContentData"
                :placeholder="'请输入欢迎语'"
                @change="groupChangeMaterial" />
        </el-form-item>
        <div class="form-title-top">
            <poster-settings
                ref="posterSettingsRef"
                v-model="formParams.poster"
                default-url="https://static.scrm.keyid.cn/assets/images/web-pc/default-groupfission-poster.png" />
        </div>
    </el-form>
</template>
<script lang="ts" setup>
import { reactive, ref, watchEffect, inject } from 'vue';
import { FormRules, FormInstance } from 'element-plus';
import materialContent from '@/components/zw/materialContent1.0/index.vue';
import ShareLinkSettings from '@/components/zw/activity/share-link-settings/index.vue';
import PosterSettings from '@/components/zw/activity/poster-settings/index.vue';

import { initMaterialData } from '@/utils/utils';

import { isOpen, ACTIVITY_LINK_WELCOME_SUFFIX, GROUP_COME_WELCOME_SUFFIX } from '../utils/index';
import { formParams } from '../utils/paramsManager';
import { IPageType } from '../utils/interface';

/* ---------------------------表单-start---------------------------- */
const pageType: IPageType | undefined = inject('pageType');

const formRef = ref<FormInstance>();

/** 自定义分享内容链接 */
const shareLinkSettingsRef = ref<FormInstance>();

const posterSettingsRef = ref<FormInstance>();

// 校验添加员工后推送欢迎语
const checkStaffWelcome = (rule: any, value: any, callback: any) => {
    // 只有无限拉群才校验群聊选择
    if (!formParams.staff_welcome.welcome_text) {
        return callback(new Error('请设置添加员工后推送欢迎语'));
    }

    callback();
};

// 校验加入群聊后推送欢迎语
const checkGroupChatWelcome = (rule: any, value: any, callback: any) => {
    // 只有无限拉群才校验群聊选择
    if (!formParams.groupchat_welcome.welcome_text) {
        return callback(new Error('请设置添加员工后推送欢迎语'));
    }

    callback();
};

// 校验海报背景
const checkPoster = (rule: any, value: any, callback: any) => {
    if (!formParams.poster.absolute_url) {
        return callback(new Error('请选择海报图片'));
    }

    // 海报库的情况下选择海报校验id
    if (formParams.poster.poster_type === 1 && !formParams.poster.poster_id) {
        return callback(new Error('请选择海报图片'));
    }
    callback();
};
const rules = reactive<FormRules>({
    link_title: [{ required: true, message: '请输入活动链接设置标题' }],
    staff_welcome: [{ required: true, validator: checkStaffWelcome }],
    groupchat_welcome: [{ required: true, validator: checkGroupChatWelcome }],
    'poster.poster_type': [{ required: true, validator: checkPoster, trigger: 'blur' }]
});

/**
 * 校验分享设置表单
 */
const validate = async () => {
    await shareLinkSettingsRef.value?.validate();
    await posterSettingsRef.value?.validate();
    return await formRef.value?.validate();
};
/* ---------------------------表单-end---------------------------- */

/* ----------------------------欢迎语-start---------------------------- */
// 添加员工ref实例化
const staffMaterialContentRef = ref();
// 加入群聊ref实例化
const groupMaterialContentRef = ref();
/**
 * @description 配置添加员工后推送欢迎语输入框选项
 * 1: 选择文本，2:表情，5: 插入员工姓名，6:插入客户昵称
 */
const inputContentTabs = ref<Array<number>>([1, 2, 5, 6]);
/**
 * @description 配置加入群聊后推送欢迎语输入框选项
 * 1: 选择文本，2:表情，6:插入客户昵称
 */
const groupInputContentTabs = ref<Array<number>>([1, 2, 7]);
/**
 * @description 欢迎语素材类型
 * 1: 图片, 2: 视频, 3: 链接, 4: 音频, 5: 文件, 6: 抽奖， 7: 电商， 8: 也是电商？？？, 9: 收集表,10 公众号, 11: 小程序
 */
const showMaterialTabs = ref<Array<string>>(['1', '2', '3', '4', '5', '7', '9', '10', '11']);

const operationList = ref<Array<number>>([1]);

const groupOperationList = ref<Array<number>>([2]);

/**
 * 添加员工推送欢迎语更改内容时回调，实时变更v-model的值
 */
const changeMaterial = (val: any) => {
    val.welcome_info.welcome_friend_id =
        val.welcome_info.welcome_friend_id || formParams.staff_welcome.welcome_friend_id;
    formParams.staff_welcome = val.welcome_info;
};
/**
 * 入群推送欢迎语更改内容时回调，实时变更v-model的值
 */
const groupChangeMaterial = (val: any) => {
    // 编辑的情况下使用接口返回的id
    if (pageType?.edit) {
        val.welcome_info.welcome_groupchat_id = formParams.groupchat_welcome.welcome_groupchat_id;
    }
    formParams.groupchat_welcome = val.welcome_info;
};

/**
 * 添加员工推送欢迎语，默认内容
 */
const defaultMaterialContentData = ref<Array<any>>([]);
/**
 * 入群推送欢迎语，默认内容
 */
const defaultGroupMaterialContentData = ref<Array<any>>([]);
/**
 * 实施变更活动链接分享设置
 */
watchEffect(() => {
    // is_default_del这个字段，是否默认能删除 1：否 2: 是
    // 链接欢迎语
    const defaultLinkWelcome = {
        type: 3,
        link_decs: formParams.link_desc,
        link_share_image: formParams.link_img,
        link_title: formParams.link_title,
        link_url: pageType?.edit ? formParams[ACTIVITY_LINK_WELCOME_SUFFIX] : '' ?? '',
        is_default_del: 1
    };

    // 添加员工欢迎语
    const defaultData = [
        {
            type: 3,
            link_decs: '"用户昵称-分享人"邀请你 加入群聊，进入可查看详情。',
            link_share_image: '/static/groupChat.png',
            link_title: '邀请你加入群聊',
            link_url: pageType?.edit ? formParams[GROUP_COME_WELCOME_SUFFIX] : '' ?? '',
            is_default_del: 1
        },
        defaultLinkWelcome
    ];
    // 入群欢迎语
    const defaultGroupData = [defaultLinkWelcome];
    defaultMaterialContentData.value = initMaterialData(defaultData);
    defaultGroupMaterialContentData.value = initMaterialData(defaultGroupData);
});

/**
 * 设置欢迎语内容
 */
const setWelcomeInfo = (data: any, groupData: any) => {
    defaultMaterialContentData.value = initMaterialData(data.welcome_material);
    defaultGroupMaterialContentData.value = initMaterialData(groupData.welcome_material);
};
/* ----------------------------欢迎语-end---------------------------- */
defineExpose({
    validate,
    setWelcomeInfo
});
</script>
